<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>Point Of Sale:Customer Management</title>
</h:head>
<h:body>
    <ui:composition template="/pages/common/commonLayout.xhtml">

        <ui:define name="content">


            <h:form id="form">

                <p:dataTable var="car" value="#{systemUserMB.lazyModel}"  paginator="true" rows="10"   resizableColumns="true"  emptyMessage="No System User found with given criteria"

                             filterDelay="5"   sortBy="firstName"        selectionMode="single" sortMode="single" selection="#{systemUserMB.selectedCustomer}" id="dataTable" lazy="true"  >
                    <p:ajax event="rowSelect" listener="#{systemUserMB.onRowSelect}" update=":form:display" oncomplete="customerDialog.show()" />

                    <f:facet name="header" >
                        <p:outputPanel>
                            <h:outputText value="Search:" />
                            <p:inputText id="globalFilter" onkeyup="carTable.filter()" style="width:250px" />
                            <p:spacer width="100" height="10" />
                            <p:commandButton value="New" onclick="composeDlg.show()" type="button" icon="ui-icon-document"/>
                        </p:outputPanel>
                    </f:facet>

                    <p:column headerText="Name" sortBy="#{car.name}"   filterBy="#{car.name}" >
                        #{car.name}
                    </p:column>
                    <p:column headerText="User Name" sortBy="#{car.userName}" filterBy="#{car.userName}" >
                        #{car.userName}
                    </p:column>

                    <p:column headerText="City" sortBy="#{car.city}"  filterBy="#{car.city}" >
                    #{car.city}
                    </p:column>


                    <p:column headerText="Contact" sortBy="#{car.primaryContact}"  filterBy="#{car.primaryContact}" >
                     #{car.primaryContact}
                    </p:column>

                </p:dataTable>

                <p:blockUI block="dataTable" trigger="dataTable">
                    LOADING<br />
                    <p:graphicImage value="/images/ajax-loader.gif"/>
                </p:blockUI>

                <p:dialog header="Employee Detail" widgetVar="customerDialog" resizable="false"
                          showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{systemUserMB.selectedCustomer.firstName}.jpg"/>
                        </f:facet>

                        <h:outputText value="Name:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.name}" style="font-weight:bold"/>


                        <h:outputText value="Company:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.userName}" style="font-weight:bold"/>

                        <h:outputText value="City:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.city}" style="font-weight:bold"/>

                        <h:outputText value="Address:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.address}" style="font-weight:bold"/>


                        <h:outputText value="Cell#:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.primaryContact}" style="font-weight:bold"/>

                        <h:outputText value="Email:" />
                        <h:outputText value="#{systemUserMB.selectedCustomer.email}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:dialog>

            </h:form>
            <p:dialog widgetVar="composeDlg" modal="true" header="New Employee" width="500" showEffect="fade" hideEffect="fade">

                <h:form>

                    <p:panelGrid columns="2">


                            <h:outputLabel for="firstName" value="First Name : " />
                            <p:inputText id="firstName" value="#{systemUserMB.firstName}">
                                <f:validateLength minimum="5" />
                            </p:inputText>
                        
                            <h:outputLabel for="lastName" value="Last Name : " />
                            <p:inputText id="lastName" value="#{systemUserMB.lastName}">
                                <f:validateLength minimum="5" />
                            </p:inputText>
                        
                            <h:outputLabel for="userName" value="User Name : " />
                            <p:inputText id="userName" value="#{systemUserMB.userName}">
                                <f:validateLength minimum="5" />
                            </p:inputText>
                        
                            <h:outputLabel for="password" value="Password : " />
                            <p:inputText id="password" value="#{systemUserMB.password}">
                            </p:inputText>
                        
                            <h:outputLabel for="email" value="Email : " />
                            <p:inputText id="email" value="#{systemUserMB.email}">
                                <f:validateLength minimum="5" />
                            </p:inputText>
                        
                            <h:outputLabel for="city" value="City : " />
                            <p:inputText id="city" value="#{systemUserMB.city}">
                                <f:validateLength minimum="5" />
                            </p:inputText>

                            <h:outputLabel for="primaryContact" value="Primary Cell : " />
                            <p:inputText id="primaryContact" value="#{systemUserMB.address}">
                                <f:validateLength minimum="5" />
                            </p:inputText>

                            <h:outputLabel for="secondaryContact" value="Secondary Cell : " />
                            <p:inputText id="secondaryContact" value="#{systemUserMB.address}">
                                <f:validateLength minimum="5" />
                            </p:inputText>

                        
                            <h:outputLabel for="address" value="Address : " />
                            <p:inputTextarea rows="5" cols="30" maxlength="100" id="address" value="#{systemUserMB.address}">
                                <f:validateLength minimum="5" />
                            </p:inputTextarea>



                        <f:facet name="footer">
                            <p:commandButton id="loginButton" value="Save" update=":msg ,:form:dataTable"  icon="ui-icon-disk"
                                             actionListener="#{systemUserMB.addUser}"
                                             oncomplete="handleLoginRequest(xhr, status, args)"/>
                            <p:commandButton value="Cancel" onclick="composeDlg.hide()" type="button" icon="ui-icon-close"/>
                        </f:facet>



                       </p:panelGrid>
                </h:form>

            </p:dialog>

            <p:growl id="msg" />
        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
            if(args.validationFailed || !args.loggedIn) {
            composeDlg.jq.effect("shake", { times:5 }, 100);
            }
            else {
            composeDlg.hide();

            }
            }
        </script>
        </ui:define>


    </ui:composition>
</h:body>

</html>
